<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/orders' }"
        >订单列表</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="main">
      <div class="displays">
        <div class="displays">
          <el-input
            clearable
            class="el-input"
            v-model.trim="params.query"
            placeholder="请输入内容"
            @clear="getSearchUsers"
            @blur="getSearchUsers"
            @keydown.native.enter="getSearchUsers"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getSearchUsers"
            ></el-button>
          </el-input>
        </div>
      </div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column prop="index" type="index" label="#" width="60">
          </el-table-column>
          <el-table-column prop="order_number" label="订单编号">
          </el-table-column>
          <el-table-column prop="order_price" label="订单价格">
          </el-table-column>
          <el-table-column prop="pay_status" label="是否付款">
            <template slot-scope="scope">
              <el-button type="primary" v-if="scope.row.pay_status == 1"
                >已支付</el-button
              >
              <el-button type="danger" v-else-if="scope.row.pay_status == 0"
                >未支付</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货"> </el-table-column>
          <el-table-column prop="create_time" label="下单时间">
            <template slot-scope="scope">
              {{ scope.row.create_time | hanler }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="150">
            <template slot-scope="scope">
              <el-tooltip content="修改订单地址" placement="top">
                <el-button
                  type="primary"
                  @click="selectdiandan(scope.$index, scope.row)"
                >
                  <i class="el-icon-edit"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="物流信息" placement="top">
                <el-button type="success" @click="wuliu">
                  <i class="el-icon-delete-solid"></i
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template>
        <div class="block">
          <!-- size-change   当 pageSize 改变时会触发 -->
          <!-- current-change 当	currentPage 改变时会触发 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pagenum"
            :page-sizes="[1, 2, 5, 10, 20]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalpage"
          >
          </el-pagination>
        </div>
      </template>
    </div>
    <!-- 收货地址 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="省市区/县" prop="sheng" class="select_form">
          <el-cascader
            class="select"
            clearable
            v-model="addForm.sheng"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            @change="addshenfen"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="dizhi" style="margin-left: 10px">
          <el-input
            v-model="addForm.dizhi"
            autocomplete="off"
            class="setinput"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 物流信息 -->
    <el-dialog title="物流进度" :visible.sync="selectFormVisible">
      <div class="blocks">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :color="red"
            :timestamp="activity.ftime"
          >
            {{ activity.context }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Dataorders, getPostMan } from "../../api/index";

import DataList from "./data";
export default {
  name: "",
  data() {
    return {
      // 级联选择器的数据源
      tableData: [],
      totalpage: 0, //总条目数
      dialogFormVisible: false,
      selectFormVisible: false,
      params: {
        pagenum: 1, //页码
        pagesize: 2, //数据条数
      },
      addForm: {
        sheng: "",
        dizhi: "",
      },
      options: DataList,
      //验证规则
      rules: {
        sheng: [
          { required: true, message: "请选择省市区/县", trigger: "blur" },
        ],
        dizhi: [{ required: true, message: "详细地址", trigger: "blur" }],
      },
      // 时间线
      activities: [
      ],
      red:"#0bbd87"
    };
  },
  created() {
    this.getorders();
  },

  methods: {
    async getorders() {
      let {
        data: { goods, total },
        meta: { status },
      } = await Dataorders(this.params);
      if (status == 200) {
        this.tableData = goods;
        this.totalpage = total;
      }
    },
    // 查询
    getSearchUsers() {},

    // 获取三级联动选取后的值
    addshenfen(value) {
      console.log(value);
    },
    // 修改数据
    selectdiandan(i, scope) {
      console.log(i + 1);
      console.log(scope);
      this.dialogFormVisible = true;
    },
    // 取消修改
    quxiao() {
      (this.addForm.sheng = ""),
        (this.addForm.dizhi = ""),
        (this.dialogFormVisible = false);
    },

    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getorders();
    },
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.getorders();
    },

    // 查询物流信息
   async wuliu(){
      this.selectFormVisible = true;

      let {data,meta:{message,status}} = await getPostMan({id:1106975712662});

      if(status == 200 ) this.$message.success({message})
        this.activities = data
        
    }
  },
};
</script>

<style scoped lang='css'>
.el-breadcrumb {
  background-color: #eaedf1;
}
.displays {
  display: flex;
  margin-bottom: 20px;
}
.el-input {
  width: 450px;
  margin-right: 15px;
}
.main {
  padding: 25px;
  background-color: #fff;
  height: auto;
}
  .blocks{
    margin-left: 30px;
  }
.el-breadcrumb {
  padding-left: 0;
}
.setinput {
  width: 85%;
}
.select {
  width: 84%;
}
.select_form {
  margin-left: 5px;
}
</style>